<template>
	<div class="scroll-wrapper" ref="wrapper">
		<div class="scroll-content">
			<div v-if="!errorShow">
				<view-list v-if="field === 'view'" :viewDatas="listDatas[cityId]"></view-list>

				<food-list v-if="field === 'food'" :foodDatas="listDatas[cityId]"></food-list>

				<hotel-list v-if="field === 'hotel'" :hotelDatas="listDatas[cityId]"></hotel-list>

				<massage-list v-if="field === 'massage'" :massageDatas="listDatas[cityId]"></massage-list>

				<ktv-list v-if="field === 'ktv'" :ktvDatas="listDatas[cityId]"></ktv-list>

				<loading :loadingShow="loadingShow">
				</loading>
			</div>
			<error :errorShow="errorShow"></error>
		</div>
	</div>
</template>

<script>
import BetterScroll from 'better-scroll';
import { mapState } from 'vuex';

import { ListModel } from 'models/list.js';
import tools from 'utils/tools.js';

import ViewList from './ViewList/Index';
import FoodList from './FoodList/Index';
import KtvList from './KtvList/Index';
import HotelList from './HotelList/Index';
import MassageList from './MassageList/Index';
import Loading from './Sub/Loading';
import Error from './Sub/Error'

export default {
	name: 'ListScrollWrapper',
	components: {
		ViewList,
		FoodList,
		KtvList,
		HotelList,
		MassageList,
		Loading,
		Error
	},

	computed: {
		...mapState(['cityId', 'field'])
	},
	data() {
		return {
			listDatas: {},
			loadingShow: true,
			errorShow: false
		}
	},
	mounted() {
		this.scroll = new BetterScroll(this.$refs.wrapper);
		this.getListDatas(this.cityId, this.field);
	},
	watch: {
		cityId() {
			this.getListDatas(this.cityId, this.field);
		}
	},
	methods: {
		getListDatas(cityId, field) {
			if (!this.listDatas[cityId]) {
				// 实现数据缓存池技术
				/* listDatas{
					[0]: 数据
					[1]:数据
				}*/
				const listModel = new ListModel();

				this.loadingShow = true;

				listModel.getListDatas(cityId, field).then(res => {
					if (res && res.status === 0) {
						const data = tools.formatJSON(res.data, 'keyword');

						this.errorShow = false;
						setTimeout(() => {
							this.loadingShow = false;
							this.listDatas[cityId] = data;
						}, 100);
					} else {
						this.errorShow = true;
						console.log({
							statusCode: res.status,
							errorMsg: res.error
						});
					}
				});
			}
		}
	}
}
</script>

<style lang="scss" scoped>

</style>
